<template>
    <div v-if="!isJoin">
        <div class="remote1" v-loading="loading" :element-loading-text="loadingText" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
            <div class="shade">
                <div class="input-container">
                    <input type="text" v-model="account" placeholder="请输入你的昵称" @keyup.enter="join">
                    <button @click="join">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div v-else>
        <!-- 容器 container -->
        <div class="container">
            <!-- 左边栏 item-1 -->
            <div class="item item-1">
                <div class="hede" title="返回管理后台">
                    <img src="./logo.jpg" alt="">
                </div>
                <div class="tog">
                    <div class="chat pointer" title="在线学员" @click="setChatType('round')">
                        <i class="iconfont el-icon-chat-line-round" v-if="chatType=='round'"></i>
                        <i class="iconfont el-icon-chat-round" v-else></i>
                    </div>
                    <div class="addressList pointer" @click="setChatType('solid')" title="所有学员">
                        <i class="iconfont el-icon-user-solid" v-if="chatType=='solid'"></i>
                        <i class="iconfont el-icon-user" v-else></i>
                    </div>
                    <div class="addressList pointer" @click="dialogVisible = true" title="设置">
                        <i class="iconfont el-icon-s-tools" v-if="chatType=='setting'"></i>
                        <i class="iconfont el-icon-setting" v-else></i>
                    </div>
                </div>
            </div>
            <!-- 中间栏 item-2 -->
            <div class="item item-2">
                <div class="input">
                    <el-input size="mini" placeholder="搜索" v-model="search">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </div>
                <div class="lists">
                    <div class="list" v-for="(v,i) in userList" v-bind:key="v.account" @click="target=v" v-if="v.account!=account" :class="[(target &&　target.account==v.account)?'at':'']">
                        <div class="hede">
                            <img src="https://image.artyears.cn/image/2019-08/mini_c_57461791-ad5f-a576-09fd-198a0b01ffef?imageView2/1/w/200/h/200/q/200" alt="">
                        </div>
                        <div class="title">
                            <div class="name">{{v.account}}
                                <!-- <span class="pull-right time">刚刚</span> -->
                            </div>
                            <span @click="apply(v.account)" v-if="v.account !== account && v.account !== isCall && !isCall" class="pointer pull-right">呼叫</span>
                            <span @click="hangup" v-if="v.account !== account && v.account == isCall" class="pointer pull-right">挂断</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item item-3">
                <span class="atvtname">
                    趣练习（找兴趣课，上趣练习) 30人
                </span>
                <el-button type="text" class="more" icon="el-icon-more"></el-button>
            </div>
            <div class="item item-4">
                <video class="videoBox" autoplay poster="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=05b297ad39fa828bce239be3cd1e41cd/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg" muted></video>
                <!-- <video class="videoBox" autoplay muted></video> -->
                <!-- <video id="camera" autoplay poster="http://pic22.nipic.com/20120629/9363864_163739336188_2.jpg" muted></video> -->
                <!-- <canvas class="videoBox"></canvas> -->
            </div>
            <div class="item item-5">
                <el-button size="mini" plain @click="sendText">开始直播</el-button>
                <el-button size="mini" plain @click="sendText">录制</el-button>
            </div>
        </div>
        <el-dialog title="选择课程模式" :visible.sync="dialogVisible" width="50%" custom-class="mybg" fullscreen="true" center="true">
            <div class="dialogBody">
                <div class="mediaType">
                    <div :class="[mediaType=='getDisplayMedia'?'is-checked':'']" @click="mediaType='getDisplayMedia'">
                        <div class="ICONFONT"><i class="dialogIconfont el-icon-s-platform"></i></div>
                        <div class="NAME">屏幕</div>
                    </div>
                    <div :class="[mediaType=='getUserMedia'?'is-checked':'']" @click="mediaType='getUserMedia'">
                        <div class="ICONFONT"><i class="dialogIconfont el-icon-video-camera-solid"></i></div>
                        <div class="NAME">摄像头</div>
                    </div>
                    <div :class="[mediaType=='getUserAudio'?'is-checked':'']" @click="mediaType='getUserAudio'">
                        <div class="ICONFONT"><i class="dialogIconfont el-icon-mic"></i></div>
                        <div class="NAME">麦克风</div>
                    </div>
                    <div :class="[mediaType=='getUserFilm'?'is-checked':'']" @click="mediaType='getUserFilm'">
                        <div class="ICONFONT"><i class="dialogIconfont el-icon-film"></i></div>
                        <div class="NAME">视频</div>
                    </div>
                    <div :class="[mediaType=='getUserHeadset'?'is-checked':'']" @click="mediaType='getUserHeadset'">
                        <div class="ICONFONT"><i class="dialogIconfont el-icon-headset"></i></div>
                        <div class="NAME">音频</div>
                    </div>
                </div>
                <hr>
                <div v-if="mediaType=='getDisplayMedia'">
                    <div class="getDisplayMedia">
                        <div>
                            <div class="ICONFONT"><i class="dialogIconfont el-icon-monitor"></i></div>
                            <div class="NAME">全幕</div>
                            <div class="declare">这里一小说明吧，这里一小说明吧，这里一小说明吧，这里一小说明吧，</div>
                        </div>
                        <div>
                            <div class="ICONFONT"><i class="dialogIconfont el-icon-copy-document"></i></div>
                            <div class="NAME">浏览器标签页</div>
                            <div class="declare">这里一小说明吧，这里一小说明吧，这里一小说明吧，这里一小说明吧，</div>
                        </div>
                        <div>
                            <div class="ICONFONT"><i class="dialogIconfont el-icon-full-screen"></i></div>
                            <div class="NAME">应用窗口</div>
                            <div class="declare">这里一小说明吧，这里一小说明吧，这里一小说明吧，这里一小说明吧，</div>
                        </div>
                    </div>
                </div>
                <div v-if="mediaType=='getUserMedia'" class="getUserMedia">
                    <div>
                        选择摄像头：
                        <el-select style="width: 320px;" v-model="media.constraints.video.deviceId" placeholder="请选择" @change="changeType">
                            <el-option v-for="item in media.enumerateDevices.videoList" :key="item.deviceId" :label="item.label" :value="item.deviceId">
                            </el-option>
                        </el-select>
                    </div>
                    <div>
                        输出分辨率：
                        <el-select style="width: 320px;" v-model="outputResolution" placeholder="请选择" @change="changeType">
                            <el-option v-for="item in outputResolutionList" :key="item.id" :label="item.label" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
   <!--                  <div>
       选择麦克风：
       <el-select style="width: 320px;" v-model="media.constraints.audio.deviceId" placeholder="请选择" @change="changeType">
           <el-option v-for="item in media.enumerateDevices.audioList" :key="item.deviceId" :label="item.label" :value="item.deviceId">
           </el-option>
       </el-select>
   </div> -->
                </div>
                <div v-if="mediaType=='getUserAudio'" class="getUserAudio">
                    <div>
                        选择麦克风：
                        <el-select style="width: 320px;" v-model="media.constraints.audio.deviceId" placeholder="请选择" @change="changeType">
                            <el-option v-for="item in media.enumerateDevices.audioList" :key="item.deviceId" :label="item.label" :value="item.deviceId">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div v-if="mediaType=='getUserFilm'" class="getUserFilm">
                    <div>
                        <div class="NAME">选择本地的视频文件作为课件</div>
                        <div class="declare">1.一次可以选择多个文件</div>
                        <label for="file_video">点击去选择视频</label>
                        <input type="file" accept="video/*" @change="change_file_video" id="file_video" multiple style="opacity: 0;display: none;" />
                        <div v-for="(v,i) in file_video_list" v-if="file_video_list.length>0">{{v.name}}　{{updateSize(v.size)}}　<span><i class="el-icon-delete"></i></span></div>
                    </div>
                </div>
                <div v-if="mediaType=='getUserHeadset'" class="getUserHeadset">
                    <div>
                        <div class="NAME">选择本地的音频文件作为课件</div>
                        <div class="declare">1.一次可以选择多个文件</div>
                        <label for="file_audio">点击去选择音频</label>
                        <input type="file" accept="audio/*" @change="change_file_audio"　id="file_audio" multiple style="opacity: 0;display: none;" />
                        <div v-for="(v,i) in file_audio_list" v-if="file_audio_list.length>0">{{v.name}}　{{updateSize(v.size)}}　<span><i class="el-icon-delete"></i></span></div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="setMedia">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script type="text/babel">
    import admin from './admin.js'

  export default {
    ...admin
  }
</script>
<style type="stylesheet/scss" lang="scss" scoped>
    @import './admin.scss';
</style>
<style>
.el-textarea__inner,
.el-input__inner {
    background: rgb(50, 54, 57);
}

* {
    padding: 0;
    margin: 0;
}

.mybg {
    background: rgb(50, 54, 57);
}
</style>